<template>
  <page-view>
    <div class="  bg-backgroundColor flow-root">
      <div class="content-box bg-slate-50 my-[25px] rounded-[5px] p-10">
        <div class=" rounded flex"><img src="../../assets/img/news.png"></div>
        <el-divider/>
        <div class=" flex flex-row">
          <div class=" flex flex-col items-center">
              <img src="../../assets/svg/暂无数据.svg" class="w-[450px]" alt="暂无数据" v-show="!queryResultData.total">
            <el-skeleton :rows="8" animated v-show="isShowSkeleton" />
            <ul class=" w-[888px]">
              <li class=" border p-10 flex flex-col" v-for="item in queryResultData.newsInfoData" :key="item">
                <div class=" font-bold mb-6 flex flex-row justify-between">
                  <p>{{ item.newsTitle }}</p>
                  <div class=" mr-20 flex flex-row items-baseline text-[#e70707]">
                    <span class=" iconfont icon-huoyan mr-3"></span>
                    <div class=" font-normal text-[12px]">
                      <span v-if="item.newsViews > 999">999+</span>
                      <span v-else>{{ item.newsViews }}</span>
                    </div>
                  </div>
                </div>
                <div class="text-[13px] news_content" @click="newDetail(item.id)">{{ item.newsContent }}</div>
                <el-tag class=" text-[13px] self-start mt-5">{{ item.newsType }}</el-tag>
              </li>
            </ul>
            <div class=" mt-[40px]">
              <el-pagination background layout="prev, pager, next,total" :hide-on-single-page="true"
                :page-size="newsPage.pageSize" :total="queryResultData.total" @current-change="currentChange"
                :current-page="newsPage.page" />
            </div>
          </div>
          <div class=" flex-1 ml-10 news_right_box overflow-hidden p-5">
            <div class="box_hot_shadow p-[5px] text-center text-[22px] tracking-[23px]">宠物之家</div>
            <div class=" p-10 box_hot_shadow mt-13">
              <div class=" text-[22px] text-[#FF1C00] font-bold mb-10 relative">
                新闻热搜榜
                <div class=" w-[30px] absolute right-0 top-0"><img src="../../assets/svg/猫咪.svg"></div>
              </div>
              <img src="../../assets/svg/暂无数据.svg" alt="暂无数据" v-show="!queryResultData.total">
              <ul class=" hot_news_ul">
                <li class=" flex flex-row text-[14px] items-center "
                  v-for="(item, index) in queryResultData.newsInfoData.slice(0, 5)" :key="item">
                  <div
                    class=" bg-[#e70707] text-[#fff]  w-6 aspect-square rounded-full flex items-center justify-center mr-5"
                    :class="{ news_yellow: index == 1, news_green: index == 2, news_grey: index > 2 }">
                    {{ index+ 1 }}</div>
                  <span class=" truncate flex-1 overflow-hidden cursor-pointer" @click="newDetail(item.id)">{{
                    item.newsTitle
                  }}</span>
                </li>
              </ul>
            </div>
            <div class=" box_hot_shadow mt-15">
              <img src="../../assets/img/pet-illustration01.jpeg">
            </div>
          </div>
        </div>
      </div>
      <el-drawer v-model="isShowDrawer" direction="rtl" size="60%" :with-header="false" @closed="drawerClosed">
        <el-scrollbar>
          <el-skeleton animated v-show="isShowRightSkeleton">
            <template #template>
              <el-skeleton-item variant="h1" />
              <el-skeleton-item variant="image" style="width: 640px; height: 400px" />
                <el-skeleton-item variant="p" style="width:50% ;margin-top: 40px;" />
                <el-skeleton-item variant="text" />
                <el-skeleton-item variant="text" />
            </template>
          </el-skeleton>
          <div>
            <p class=" text-[30px] font-bold text-center">{{ newDetailData.newsTitle }}</p>
            <p class=" text-right mt-10">{{ newDetailData.newsTime }}</p>
            <div class=" mt-[40px] h-[400px]"><img :src="newDetailData.newsPic" class="h-full mx-auto"></div>
            <p class=" newDetail_content font-serif mt-[40px]">{{ newDetailData.newsContent }}</p>
          </div>
        </el-scrollbar>
      </el-drawer>
    </div>
  </page-view>
</template>
<script setup>
import API from '../../utils/API';
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";

const newsPage = reactive({
  page: 1,
  pageSize: 8,
})

const queryResultData = reactive({
  newsInfoData: [],
  total: 0,
})

const isShowSkeleton = ref(false)
const getAllNewsInfo = () => {
  isShowSkeleton.value = true;
  API.newsInfo.getAllNewsInfo(newsPage).then(result => {
    console.log(result);
    queryResultData.newsInfoData = result.records;
    queryResultData.total = result.total;
  }).catch(error => {
    console.log(error);
  }).finally(() => {
    isShowSkeleton.value = false;
  })
}

const newDetailData = ref({})
// 新闻详情
const isShowDrawer = ref(false);
const isShowRightSkeleton=ref(false)
const newDetail = (id) => {
  isShowDrawer.value = true;
  isShowRightSkeleton.value=true;
  API.newsInfo.findByID(id).then((result) => {
    console.log(result);
    newDetailData.value = result;
  }).catch(error => {
    console.log(error);
  }).finally(() => {
    isShowRightSkeleton.value=false;
  })
}

const drawerClosed = () => {
  newDetailData.value = {};
}
// 分页
const currentChange = (index) => {
  newsPage.page = index;
  getAllNewsInfo();
}

onMounted(() => {
  getAllNewsInfo();
})
</script>

<style scoped lang="scss">
// 多行省略
@mixin text_overflow {
  display: -webkit-box;
  @content;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

:deep(.el-drawer__body) {
  background-color: #fff5f5;
}

.news_right_box {
  .box_hot_shadow {
    border-radius: 5px;
    box-shadow: 2px 2px 3px 4px rgb(216, 213, 213);
  }

  .hot_news_ul {

    .news_yellow {
      background-color: #fdcb6e;
    }

    .news_grey {
      background-color: #bdc3c7;
    }

    .news_green {
      background-color: #007175;
    }

    li+li {
      margin-top: 25px;
    }
  }
}


.news_content {
  cursor: pointer;

  @include text_overflow() {
    -webkit-line-clamp: 2;
  }

  &:hover {
    text-decoration: solid underline #e00909;
    color: #e00909;
  }
}

.newDetail_content {
  text-indent: 2em;
}
</style>